<!--
* @FileDescription: 滚动区域 自定义下拉刷新，回到顶部
* @Author: chenz
* @Date: 2021/4/15
* @LastEditors: 最后更新作者
* @LastEditTime: 最后更新时间
-->

<template>
	<view>
		<!-- 滚动区域 -->
		<view class="task-list-scroller" v-if="datalist">
			<!-- 滚动盒子 -->
			<cl-scroller ref="scroller" @up="onUp" @down="onDown" bottom="50rpx" enable-back-to-top >
				<!-- 数据渲染 -->
				<view class="task-list" v-if="datalistType!==5" v-for="(item, index) in datalist" :key="index">
					<!-- datalistType===1 未完成/已完成/已取消 -->
					<view class="task-list-project" v-if="datalistType===1">
						<!-- 头像 -->
						<view class="project-avatar">
							<image class="image-style" :src="item.imageSrc" mode=""></image>
						</view>
						<!-- 项目信息 -->
						<view class="project-info item-flex2">
							<view class="project-info-title">{{item.title}}</view>
							<view class="project-info-startime">开始时间：{{item.startTime}}</view>
							<view class="project-info-duration">项目时长：{{item.duration}}</view>
						</view>
						<!-- 状态 -->
						<view class="project-status item-flex1">
							<view class="status">{{item.satusText}}</view>
							<view class="views-details" @click="goTo(123456)">{{item.viewsDetails}}</view>
						</view>
						<!-- 分割线 -->
						<cl-divider class="cl-divider-style" />
					</view>
					<!-- datalistType===2 空闲时间 -->
					<view class="task-list-project" v-if="datalistType===2">
						<view class="project-info item-flex3">
							<view class="project-info-message">
								您在{{item.startTime}} 至 {{item.startTime}} 暂无预约项目
							</view>
						</view>
						<view class="project-info-newItem item-flex1">
							<button class="newItem" plain="true">新建项目</button>
						</view>
						<!-- 分割线 -->
						<cl-divider class="cl-divider-style" />
					</view>
					<!-- 我的培训 -->
					<view class="task-list-project" v-if="datalistType===3">
						<!-- 头像 -->
						<view class="project-avatar">
							<image class="image-style" :src="item.imageSrc" mode=""></image>
						</view>
						<!-- 项目信息 -->
						<view class=" item-flex2" style="padding-right: 20rpx;">
							<view class="project-info-title1">{{item.title}}</view>
							<text class="project-info-message">{{item.message}}</text>
						</view>
						<!-- 分割线 -->
						<cl-divider class="cl-divider-style" />
					</view>
					<!-- 我的订单 -->
					<view class="task-list-project" v-if="datalistType===4"></view>
				</view>
				<!-- 自定义 -->
				<view v-if="datalistType===5">
					<view class="type5">
						<slot></slot>
					</view>
				</view>
				<!-- 加载 -->
				<cl-loadmore v-if="datalist.length > 0" :loading="loading"></cl-loadmore>
			</cl-scroller>
		</view>
		<view class="task-list-null" v-if="!datalist || datalist.length===0">
			暂无数据
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 根据类型来判断显示什么样的页面
			datalistType: {
				type: Number
			},
			// 后端返回过来的数据即渲染   array类型
			datalist: {
				type: Array,
				default: function() {
					return [];
				}
			},
			// 加载
			loading: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				type: 1,
				current: 0,
				datass: [],
			};
		},
		watch: {
			// 监听传过来的类型
			datalistType: function(datalistType) {
				console.log('监听传过来的类型', datalistType)
			},
			// 监听数据
			datalist: {
				handler: function(datalist) {
					console.log("监听数据", datalist)
					datalist = datalist
				},
				deep: true,
			}
		},

		created() {
			// this.onDown();
			console.log('this.datalistType', this.datalistType)
		},

		mounted() {

		},

		methods: {

			// 上拉加载
			onUp() {
				this.$emit("onUp", "onUp")
			},

			// 下拉刷新
			onDown() {
				this.$emit("onDown", "onDown")
			},

			/**,
			 * @description 查看详情跳转,
			 *  @param {number/string} id,
			 */
			goTo(id) {
				console.log('查看详情跳转   id：', id)
			},

			// scroll() {
			// 	console.log(1111111111)
			// }
		}
	};
</script>

<style lang="scss" scoped>
	// 滚动区域
	.task-list-scroller {
		height: 100%;
		overflow: hidden;

		// 每一项
		.task-list {
			margin: 20rpx;
			height: 172upx;

			// 每一项
			.task-list-project {
				// background-color: $subject-bgc;
				width: 100%;
				height: 152rpx;
				display: flex;
				// border-bottom: 1rpx solid #d8d9dc;
				// flex-direction:row;  // 布局方向 x轴从左至右
				// flex-wrap:nowrap;  // 换行 不换行
				flex-flow: row nowrap; // 是以上的简写形式
				justify-content: flex-start; // 在主轴的对其方式 从左往右
				align-items: center; // 交叉轴上如何对齐 默认占满
				position: relative;

				// 项目头像
				.project-avatar {
					padding-left: 10rpx;
					flex: 0.8;

					// 图片的样式
					.image-style {
						width: 130rpx;
						height: 130rpx;
						border-radius: 12rpx;
						margin: auto 0;
					}

				}

				// 项目信息
				.project-info {
					height: 100%;
					position: relative;

					// 标题
					.project-info-title {
						font-size: 32rpx;
						position: absolute;
						top: 8rpx;
						color: rgba(0, 0, 0, 0.76);
					}

					// 开始时间 
					.project-info-startime {
						font-size: 24rpx;
						position: absolute;
						top: 64rpx;
						color: $text-color;
					}

					// 时长
					.project-info-duration {
						font-size: 24rpx;
						position: absolute;
						top: 102rpx;
						color: $text-color;
					}

					// 空闲时间信息
					.project-info-message {
						font-size: 24rpx;
						color: $text-color;
						padding: 10rpx 40rpx 0 10rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2; //可设置显示的行数
						line-clamp: 2;
						-webkit-box-orient: vertical;

					}

				}

				// 空闲时间新建
				.project-info-newItem {
					height: 100%;
					position: relative;

					.newItem {
						width: 166rpx;
						height: 56rpx;
						font-size: 24rpx;
						color: $subject-bgc;
						border: 1rpx solid $subject-bgc;
						border-radius: 35rpx;
						position: absolute;
						top: 50rpx;
					}
				}

				// 项目状态
				.project-status {
					height: 100%;
					position: relative;

					// 状态
					.status {
						color: $subject-bgc;
						font-size: 32rpx;
						position: absolute;
						top: 10rpx;
						left: 74rpx;
					}

					// 查看详情
					.views-details {
						color: $text-color;
						font-size: 24rpx;
						position: absolute;
						top: 100rpx;
						left: 74rpx;
					}
				}

				// 设置分割线位置
				.cl-divider-style {
					padding: 0 10rpx 0 10rpx;
					position: absolute;
					top: 120rpx;
					left: 0rpx;
					right: 0rpx;
					bottom: 0rpx;
				}

			}

		}

	}

	.task-list-null {
		width: 100%;
		height: 100%;
		color: $text-color;
		margin: 0 auto;
	}

	.item-flex1 {
		flex: 1;
	}

	.item-flex2 {
		flex: 2;
	}

	.item-flex3 {
		flex: 3;
	}
	
	// .type5{
	// 	margin: 20rpx 0 0 0 ;
	// 	height: 500rpx !important;
	// }
</style>
